<template>
	<div class="activeMessageBox">
		<h3>MessageBox 弹框</h3>
		<div class="messageBox1">
			<h4>消息提示</h4>
			<el-button type="text" @click="open">点击打开MessageBox</el-button>
		</div>
		<div class="messageBox2">
			<h4>确认消息框</h4>
			<el-button type="text" @click="open2">点击打开MessageBox</el-button>
		</div>
		<div class="messageBox3">
			<h4>提交内容</h4>
			<el-button type="text" @click="open3">点击打开MessageBox</el-button>
		</div>
		<div class="messageBox4">
			<h4>自定义</h4>
			<el-button type="text" @click="open4">点击打开MessageBox</el-button>
		</div>
		<div class="messageBox5">
			<h4>使用HTML片段</h4>
			<el-button type="text" @click="open5">点击打开MessageBox</el-button>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			open() {
				this.$alert('这是一段内容', '标题名称', {
					confirmButtonText: '确定',
					callback: action => {
						this.$message({
							type: 'info',
							message: `action:${action}`
						})
					}
				})
			},
			open2() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			open3() {
				this.$prompt('请输入邮箱', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
					inputErrorMessage: '邮箱格式不正确'
				}).then((value) => {
					this.$message({
						type: 'success',
						message: '您的邮箱是' + JSON.stringify(value)
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
			},
			open4() {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '内容可以是 '),
						h('i', {
							style: 'color: teal'
						}, 'VNode')
					]),
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					beforeClose: (action, instance, done) => {
						if(action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '执行中...';
							setTimeout(() => {
								done();
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 3000);
						} else {
							done();
						}
					}
				}).then(action => {
					this.$message({
						type: 'info',
						message: 'action: ' + action
					});
				});
			},
			open5(){
				this.$alert('<strong>这是</strong><b>HTML</b><i>代码</i>片段','HTML 片段',{
					dangerouslyUseHTMLString:true
				})
			}
		}
	}
</script>

<style>

</style>